//清除浮动
@mixin clearfix() {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

//全屏定位
@mixin fxied-absolute() {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

// 顶部固定
@mixin fxied-top() {
    position: fixed;
    top: 0;
    right: 0;
}

// 底部固定
@mixin fxied-bottom() {
    position: fixed;
    bottom: 0;
    right: 0;
}

//水平居中
@mixin center-block() {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

//定位上下左右居中
@mixin fxied-center() {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

//上下居中
@mixin vertical-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

//左右居中
@mixin horizontal-center() {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

//尺寸助手
@mixin size($width, $height) {
    width: $width;
    height: $height;
}


// 单行文本溢出显示...  元素必须是 block 或 inline-block 级。
@mixin text-overflow() {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行行文本溢出显示...  元素必须是 block 或 inline-block 级。
@mixin mult_line_ellipsis($line: 2) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}


@mixin pct($pct) {
    width: #{$pct};
    position: relative;
    margin: 0 auto;
}


//正方形
@mixin square($size) {
    @include size($size, $size);
}

// 绘制三角
@mixin triangle($width, $height, $color, $direction) {
    $width: $width/2;
    $color-border-style: $height solid $color;
    $transparent-border-style: $width solid transparent;
    height: 0;
    width: 0;
    @if $direction==up {
        border-bottom: $color-border-style;
        border-left: $transparent-border-style;
        border-right: $transparent-border-style;
    }
    @else if $direction==right {
        border-left: $color-border-style;
        border-top: $transparent-border-style;
        border-bottom: $transparent-border-style;
    }
    @else if $direction==down {
        border-top: $color-border-style;
        border-left: $transparent-border-style;
        border-right: $transparent-border-style;
    }
    @else if $direction==left {
        border-right: $color-border-style;
        border-top: $transparent-border-style;
        border-bottom: $transparent-border-style;
    }
}
//公共flex布局
@mixin common-flex($justify:space-between,$align:center,$flow:row){
    display: flex;
    align-items: $align;
    justify-content: $justify;
    flex-flow: $flow;
  }